<script setup lang="ts">
import { getSysRoleList, SysRole } from "@/api/sys_role";
import { onMounted, reactive, ref } from "vue";

defineOptions({
  name: "SysRoleList"
});

const columns: TableColumnList = [
  {
    label: "slug",
    prop: "slug"
  },
  {
    label: "name",
    prop: "name"
  },
  {
    label: "status",
    prop: "status"
  },
  {
    label: "remark",
    prop: "remark"
  }
];

const roles = reactive<Array<SysRole>>([]);
const loading = ref(true);
const pagination = reactive<PageMeta>({
  current_page: 1,
  page_size: 1,
  total: 0
});

const getListData = async () => {
  try {
    loading.value = true;
    const { data } = await getSysRoleList({
      current_page: pagination.current_page
    });
    roles.length = 0;
    roles.push(...data.list);

    pagination.current_page = data.meta.current_page;
    pagination.page_size = data.meta.page_size;
    pagination.total = data.meta.total;
  } catch (e) {
    console.log(e);
  } finally {
    loading.value = false;
  }
};
const onCurrentChange = (current: number) => {
  pagination.current_page = current;
  getListData();
};
onMounted(() => {
  getListData();
});
</script>

<template>
  <div>
    <el-card class="w-full" shadow="never">
      <template #header>
        <span>角色列表</span>
      </template>
      <pure-table :data="roles" :columns="columns" />
      <template #footer>
        <el-pagination
          v-model:currentPage="pagination.current_page"
          class="float-right my-4"
          :page-size="pagination.page_size"
          :total="pagination.total"
          :background="true"
          layout="prev, pager, next"
          @current-change="onCurrentChange"
        />
      </template>
    </el-card>
  </div>
</template>
